<template>
  <v-card>
    <v-data-iterator
      :items="notifycationStore.notifycationlist"
      item-value="title"
    >
      <template #header>
        <v-card class="text-h6 d-flex flex-row justify-space-between align-center text-primary" variant="flat" >
          <template #title>
            通知
          </template>
        </v-card>
        <v-divider thickness="3" color="primary"></v-divider>
      </template>

      <template #default="{ items }">
        <v-card
          v-for="item in items"
          :key="item.raw.title"
          class="text-caption"
          variant="plain"
        >
        <v-card-text class="px-0 py-0 d-flex justify-space-between align-center">
          <v-container class="px-0 py-0">
            <v-icon color="primary" size="tiny" class="">mdi-circle-small</v-icon> {{item.raw.title}}
          </v-container>
          <v-btn variant="text" :ripple="false" class="px-0 py-0 mx-0 my-0 text-primary" @click="lookup(item.raw)">
            <u>查看</u>
            <v-dialog v-model="dialog">
              <v-card>
                <v-card-title>{{lookupNotifycationTitle}}</v-card-title>
                <v-card-text>{{lookupNotifycationContent}}</v-card-text>
                <v-card-actions>
                  <v-btn @click="dialog = false">确定</v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
          </v-btn>

      </v-card-text>
      <v-divider></v-divider>
      </v-card>

      </template>

      <template #footer>
        <v-divider thickness="3" color="primary"></v-divider>
        <v-card class="d-flex justify-sm-end">
          <v-btn variant="text" class="justify-self-end text-body-2"><p class="text-primary">查看全部</p></v-btn>
        </v-card>

      </template>
    </v-data-iterator>
  </v-card>
</template>

<script setup lang="ts">
import { useNotifycationStore } from '@/stores/user/Notifycation';
import { onBeforeMount, ref } from 'vue';
const notifycationStore = useNotifycationStore();
onBeforeMount(() => {
  notifycationStore.dispatchGetNotifycation();
})

const lookupNotifycationTitle = ref<string>('');
const lookupNotifycationContent = ref<string>('');
const dialog = ref(false);

function lookup(notification:{title:string, content:string} ){
  lookupNotifycationTitle.value = notification.title;
  lookupNotifycationContent.value = notification.content;
  dialog.value = true;
}

</script>
